<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133296718-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133296718-1');
    </script>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="../../images/webpage/icon.png">

    <title>Princess Connect! Re:Dive - Quest Helper | Quest Data</title>
    <meta name="title" content="Princess Connect! Re:Dive - Quest Helper | Quest Data"/>

    <!-- META DATA -->
    <meta name="description" content="Quest data used in priconne-quest-helper, a tool for that provides quest choosing assistance and project management for the game 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）.">
    <meta name="author" content="S'pugn">
    <meta name="keywords" content="Princess Connect Re:Dive, プリンセスコネクト! Re:Dive, Quest Helper, S'pugn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- OPEN GRAPH / FACEBOOK META DATA -->
    <meta property="og:title" content="Princess Connect! Re:Dive - Quest Helper | Quest Data"/>
    <meta property="og:description" content="priconne-quest-helper's Currently Loaded Quest Data."/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://raw.githubusercontent.com/Expugn/priconne-quest-helper/master/images/webpage/icon.png"/>
    <meta property="og:image:width" content="64"/>
    <meta property="og:image:height" content="64"/>
    <meta property="og:url" content="https://expugn.github.io/priconne-quest-helper/pages/quest-data/"/>
    <meta property="og:locale" content="en_US"/>

    <!-- TWITTER META DATA -->
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@eSpugn"/>
    <meta name="twitter:creator" content="@eSpugn"/>
    <meta name="twitter:title" content="Princess Connect! Re:Dive - Quest Helper | Quest Data"/>
    <meta name="twitter:description" content="priconne-quest-helper's Currently Loaded Quest Data."/>

    <!-- SCRIPTS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../../vendor/modernizr/modernizr-custom.js"></script> <!-- WEBP CHECK -->
    <script src="../../scripts/priconne-data.js"></script>

    <!-- CSS STYLE SHEETS -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../css/spritesheet.css"/>
    <link rel="stylesheet" href="../../css/data.css"/>
</head>
<body>
<noscript>
    <style type="text/css">
        div {display: none;}
        hr {display: none;}
        footer {display: none;}
    </style>
    <h1 style="color: white; font-family: 'Trebuchet MS', Arial, serif; text-align:center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px #000000;">
        <span style="color: orangered;">JavaScript is disabled!</span>
        <br><br>
        <span style="color: deepskyblue;">priconne-quest-helper/quest-data/</span> cannot function without JavaScript.
        <br><br>
        <span style="color: #ffdf73;">Please enable JavaScript to continue!</span>
    </h1>
</noscript>

<div>
    <h1 class="title main_title">Princess Connect! Re:Dive - Quest Helper</h1>
    <h2 class="title sub_title">Quest Data</h2>
    <h1 class="title simple_title">priconne-quest-helper &boxv; Quest Data</h1>
</div>

<hr>
<div id="quest-data-div"></div>
<hr>
</body>

<footer>
    <p class="footer">
        Made With <span class="heart-red">❤</span> By S'pugn
        <i class="footer webpage webpage-HAhaa"></i>
    </p>
</footer>

<script>
    function get_item_sprite_class(item_name) {
        return "is__" + item_name.replace("'", "").replace(/\W/g, '-').toLowerCase().replace('---', '-');
    }

    window.onload = function () {
        quest_data.read_data(function (success) {
            if (success)
                run();
            else
                document.getElementById("quest-data-div").innerHTML = "failed to read quest data";
        });

        function run() {
            const quests = quest_data.data();
            for (const quest_id in quests) {
                let quest_div = document.createElement("div");
                quest_div.classList.add("quest");

                // QUEST TITLE
                let difficulty = document.createElement("span");
                let title = document.createElement("h3");
                difficulty.classList.add("heart-red");
                if (quest_id.includes("VH")) {
                    difficulty.innerText = "VH";
                }
                else if (quest_id.includes("H") && !quest_id.includes("VH")) {
                    difficulty.innerText = "H";
                }
                title.classList.add("title");
                title.innerHTML = quest_id.replace("VH", " ").replace("H", " ");
                title.appendChild(difficulty);
                quest_div.appendChild(title);

                // MEMORY PIECE
                let memory_piece_div = document.createElement("div");
                memory_piece_div.classList.add("shard");
                let memory_piece = document.createElement("div");
                memory_piece.classList.add("item-sprite");
                if (quest_id.includes("H")) {
                    const shard_name = quests[quest_id][quest_data.tags.CHAR_SHARD]["item_name"];
                    memory_piece.title = shard_name;
                    memory_piece.classList.add(get_item_sprite_class(shard_name));
                }
                else {
                    memory_piece_div.classList.add("disabled");
                }
                memory_piece.alt = "";
                let memory_piece_drop = document.createElement("span");
                if (quest_id.includes("H")) {
                    memory_piece_drop.innerText = quests[quest_id][quest_data.tags.CHAR_SHARD]["drop_percent"] + "\u0025";
                }
                else {
                    memory_piece_drop.innerText = "00\u0025";
                }
                memory_piece_div.appendChild(memory_piece);
                memory_piece_div.appendChild(memory_piece_drop);
                quest_div.appendChild(memory_piece_div);

                // LINE BREAK
                let line_break = document.createElement("br");
                quest_div.appendChild(line_break);

                // ITEMS
                let items_div = document.createElement("div");
                items_div.classList.add("items");
                for (let i = 1 ; quests[quest_id]["item_" + i] !== undefined ; i++) {
                    const item = quests[quest_id]["item_" + i];
                    let item_entry = document.createElement("div");
                    item_entry.classList.add("item-sprite", get_item_sprite_class(item["item_name"]));
                    item_entry.title = item["item_name"];
                    let item_percent = document.createElement("span");
                    item_percent.classList.add("drop-rate", "item_drop-rate");
                    item_percent.innerText = item["drop_percent"] + "\u0025";
                    item_entry.appendChild(item_percent);
                    items_div.appendChild(item_entry);

                    if (i === 3 && quests[quest_id]["item_" + (i + 1)] === undefined) {
                        let item_entry = document.createElement("div");
                        item_entry.classList.add("item-sprite", "disabled");
                        let item_percent = document.createElement("span");
                        item_percent.classList.add("drop-rate", "item_drop-rate");
                        item_percent.innerText = "0\u0025";
                        item_entry.appendChild(item_percent);
                        items_div.appendChild(item_entry);
                    }
                }
                quest_div.appendChild(items_div);

                // SUBDROPS
                let subdrops_div = document.createElement("div");
                subdrops_div.classList.add("subdrops");
                const subdrops = quests[quest_id]["subdrops"];
                const subdrops_percent = quests[quest_id]["subdrops_percent"];
                for (let i = 0, j = subdrops.length ; i < j ; i++) {
                    let item_entry = document.createElement("div");
                    item_entry.classList.add("item-sprite", get_item_sprite_class(subdrops[i]));
                    item_entry.title = subdrops[i];
                    let item_percent = document.createElement("span");
                    item_percent.classList.add("drop-rate", "item_drop-rate");
                    if (subdrops_percent !== undefined) {
                        item_percent.innerText = subdrops_percent[i] + "\u0025";
                    }
                    else {
                        item_percent.innerText = "20\u0025";
                    }
                    item_entry.appendChild(item_percent);
                    subdrops_div.appendChild(item_entry);
                }
                quest_div.appendChild(subdrops_div);

                document.getElementById("quest-data-div").appendChild(quest_div);
            }
        }
    }
</script>
</html>